<template>
	<view>
		<NavBar text='网上问诊' />
		<view style="width: 100%; height: 135rpx;"></view>

		<view class="flx1 liststyle" v-for="(item,index) in dortorlist" :key="index">
			<view class="liststyle_left">
				<image :src="item.header"></image>
			</view>
			<view class="liststyle_right">
				<view class="flx1">
					<view class="listname">{{item.name}}</view>
					<view class="listzw">[{{item.zw}}]</view>
				</view>
				<view style="margin-top:20rpx;">
					<view class="listtext">{{item.text}}</view>
				</view>
			</view>
		</view>
		<view class="flx1" style="width: 90%; margin:0 auto; margin-top:20rpx;">
			<view style=" text-align: center; border: solid 1rpx #869fde; line-height: 40rpx; height: 40rpx; color: #869fde; font-size: 30rpx; width: 400rpx; border-radius: 10rpx;">
				简介</view>
			<view style="margin-left: 40rpx;">
				<u-read-more showHeight="100rpx" :toggle='true' closeText='查看更多'>
					<rich-text style="font-size: 25rpx; color: #a2a2a2;" :nodes="content"></rich-text>
				</u-read-more>
			</view>
		</view>
		<view style="width: 100%; height: 20rpx; background-color: #ebebeb; margin-top:30rpx;"></view>
		<view class="wzstyle">
			<view class="wzstyleHeader">问诊服务</view>
			<view class="flx wzstyleList">
				<view class="flx1">
					<view class="flxAlign">
						<view class="wzstyleList_image">
							<image src="/static/OnlineConsultation/twwz.png"></image>
						</view>
					</view>
					<view class="wzstyleList_text">
						<view class="wzstyleList_text_header">图文问诊</view>
						<view style="width:100%; height: 20rpx;"></view>
						<view class="wzstyleList_text_text">
							使用图文，语音与医生沟通
						</view>
					</view>
				</view>
				<view class="flxAlign">
					<view class="wzstyleList_end">50/次</view>
				</view>	
			</view>	
			<view class="flx wzstyleList">
				<view class="flx1">
					<view class="flxAlign">
						<view class="wzstyleList_image">
							<image src="/static/OnlineConsultation//spwz.png"></image>
						</view>
					</view>
					<view class="wzstyleList_text">
						<view class="wzstyleList_text_header">视频问诊</view>
						<view style="width:100%; height: 20rpx;"></view>
						<view class="wzstyleList_text_text">
							预约时间与医生进行视频问诊
						</view>
					</view>
				</view>
				<view class="flxAlign">
					<view class="wzstyleList_end">50/次</view>
				</view>	
			</view>	
			<view style="width: 100%; height: 20rpx;"></view>
		</view>
		<view style="width: 100%; height: 20rpx; background-color: #ebebeb; margin-top:30rpx;"></view>
		<view class="pjstyle">
			<view class="pjstyleHeader">医生评价<span>（45）</span></view>
			<view class="flx" style="border-bottom:1rpx solid #cecece; padding:10rpx 0 10rpx 0;" v-for="(item,index) in pjia" :key="index">
				<view>
					<view class="textstyle">{{item.name}}</view>
					<view class="textstyle">{{item.text}}</view>
					<view class="textstyle">{{item.date}}</view>
				</view>
				<view class="flxAlign">
					<u-rate activeColor='#fd8a04' v-model="item.number" :readonly='true'></u-rate>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="bottom flx">
			<view @click="zxzx" class="flx2 flxAlign" style="width: 30%; border-right: 1rpx solid #fff;">
				<view class="flxAlign">
					<view class="imagebuttom">
						<image src="/static/OnlineConsultation/zx.png"></image>
					</view>
				</view>
				<view class="textbuttom">在线咨询</view>
			</view>
			<view class="flx2 flxAlign" style="width: 30%; border-right: 1rpx solid #fff;">
				<view class="flxAlign">
					<view class="imagebuttom">
						<image src="/static/OnlineConsultation/dh.png"></image>
					</view>
				</view>
				<view class="textbuttom">电话咨询</view>
			</view>
			<view class="flx2 flxAlign" style="width: 30%;">
				<view class="flxAlign">
					<view class="imagebuttom">
						<image src="/static/OnlineConsultation/sc.png"></image>
					</view>
				</view>	
				<view class="textbuttom">收藏</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				dortorlist: [{
					header: '/static/reservationRegister/userheader.png',
					name: '王医生',
					zw: '消化科王主任',
					text: '擅长消化科常见病、疑难病及危重病。',
					ks: '消化科'
				}],
				content: `王医生，男，主任医师，教授，硕士生导师，原消化科科主任专业特长:多
				年来一直从事消化内科临床工作年，积累了丰富的临床经验。对消化科常见病事消化内科临床工作年，积累了丰富的临床经了丰富的临床经验。对消化科常见病事消化内科临`,
				pjia:[
					{
						name:'王**',
						text:'很好很好很好很好',
						date:'2018/07/16',
						number:4
					},
					{
						name:'王**',
						text:'很好很好很好很好',
						date:'2018/07/16',
						number:4
					}
				]
			
			}
		},
		onLoad(params){
			console.log(JSON.parse(params.datas));
			this.dortorlist[0].name = JSON.parse(params.datas).name
			this.dortorlist[0].zw = JSON.parse(params.datas).ks + '主任'
			this.dortorlist[0].text = JSON.parse(params.datas).text
			this.dortorlist[0].ks = JSON.parse(params.datas).ks
		},
		methods:{
			zxzx(){
				uni.navigateTo({
					url:'/pages/OnlineConsultation/zxxq?datas=' + 1
				})
			}
		}
		
	}
</script>

<style scoped lang="scss">
	.liststyle {
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;

		.liststyle_left {
			width: 100rpx;
			height: 100rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.liststyle_right {
			width: 70%;
			margin-left: 30rpx;

			.listname {
				font-weight: 600;
				color: #333;
			}

			.listzw {
				font-size: 25rpx;
				color: #6594ea;
				text-align: bottom;
				margin-top: 5rpx;
				margin-left: 30rpx;
			}

			.listtext {
				font-size: 25rpx;
				color: #a5a5a5;
			}

			.listks {
				font-size: 25rpx;
				color: #6594ea;
				line-height: 50rpx;
			}

			.zx {
				width: 120rpx;
				text-align: center;
				height: 50rpx;
				line-height: 50rpx;
				background-color: #fc8e16;
				color: #fff;
				border-radius: 10rpx;
				font-size: 25rpx;
			}
		}
	}
	.wzstyle{
		width: 90%;
		margin:0 auto;
		.wzstyleHeader{
			font-size:35rpx;
			letter-spacing: 1rpx;
			color: #6594ea;
			line-height: 80rpx;
			border-bottom: 1rpx solid #cecece;
		}
		.wzstyleList{
			// border-bottom: #cecece solid 1rpx;
			margin-top: 20rpx;
			padding:10rpx 0 10rpx 0;
			.wzstyleList_image{
				width: 80rpx;
				height: 80rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.wzstyleList_text{
				margin-left:20rpx;
				.wzstyleList_text_header{
					font-size: 30rpx;
					font-weight: 600;
					
				}
				.wzstyleList_text_text{
					font-size: 25rpx;
					color: #a5a5a5;
				}
			}
			.wzstyleList_end{
				font-size: 30rpx;
				color: #fc8e16;
			}
		}
	}
	.pjstyle{
		width: 90%;
		margin:0 auto;
		.pjstyleHeader{
			font-size:35rpx;
			letter-spacing: 1rpx;
			color: #6594ea;
			line-height: 80rpx;
			border-bottom: 1rpx solid #cecece;
		}
		.textstyle{
			font-size: 30rpx;
			color: #a5a5a5;
			margin-top:10rpx;
		}
	}
	.bottom{
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		padding: 20rpx;
		overflow: hidden;
		box-sizing: border-box;
		background: linear-gradient(to right,#0c8efc, #00b8fe);
		.imagebuttom{
			width: 50rpx;
			height: 50rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.textbuttom{
			line-height: 80rpx;
			text-align: center;
			margin-left: 10rpx;
			color: #fff;
		}
	}
</style>